import Handsontable from 'handsontable'
let that = null;
let repeatRow = [];//数据重复筛选


/**
 * 必填校验
 * @param {*} value 
 * @param {*} callback 
 * @returns 
 */
const emptyValidator = (value, callback)=>{
    if((!value)) return callback(false);
    return callback(true);
}
/**
 * 邮箱输入校验
 * @param {*} value 
 * @param {*} callback 
 */
const emailValidator = (value, callback) => {
    if((!value)) return callback(true)
    // setTimeout(() => {
    if (/.+@.+/.test(value)) {
        return callback(true);

    } else {
        return callback(false);
    }
    // }, 1000);
};

Handsontable.renderers.registerRenderer(
  'negativeValueRenderer',
  negativeValueRenderer
)
const hotSetting = {//基本参数配置
    licenseKey: 'non-commercial-and-evaluation',
  
    // data: [['sample', 'data']],
    // * @param height 表格高度
    // * @param data   表格数据{cells:xxx,properties:xx}
    // * @param rowHeaders 行头字段
    // * @param colHeaders 列头字段
    // * @param clearBtn   清空按钮元素
    // * @param saveBtn    保存按钮元素
    // * @param saveCallBack 保存操作回调
    // * @returns {Handsontable}
    data: [],        //数据可以是二维数组，也可以是数组对象
    headerTooltips: true,//内容过长提示
    // headerTooltips: { // 提示
    //     rows: true,
    //     columns: true,
    //     onlyTrimmed: true
    // },
    undo: true,
    width: '100%',
    height: '80vh',
    className: 'htCenter',
    // colHeaders: true,
    // startRows: 7,//行列范围                
    // startCols: 6,                
    // minRows: 2,  //最小行列                
    // minCols: 5,                
    // maxRows: 20,  //最大行列                
    maxCols: '',
    rowHeaders: true,//行表头，可以使布尔值（行序号），可以使字符串（左侧行表头相同显示内容，可以解析html），也可以是数组（左侧行表头单独显示内容）。true则显示colHeaders的内容，否则不显示
    formulas: false, //计算公式 支持公式自动计算

    // colHeaders:   ['','班级' ,`学生姓名`,'学号' ,
    //     `<span style="min-width:120px"><span style="color:red">*</span><span class="table-unique-code-header">分数</span></span>`
    //     ,'性别','出生日期','手机','邮箱','照片'
    // ],//自定义列表头or 布尔值,
    colHeaders: [],//'学生姓名','学号','教育ID','性别','身份证号','民族','户口所以城区（英文/分开）','住宿意向','中考成绩','现住址','选考科目（各科英文，隔开）'
    // minSpareCols: 2, //列留白
    
    // minSpareRows: 1,//行留白
    currentRowClassName: 'currentRow', //为选中行添加类名，可以更改样式
    currentColClassName: 'currentCol',//为选中列添加类名
    autoWrapRow: true, //自动换行
    contextMenu: false,///自定义数组 当值为true时，启用右键菜单，为false时禁用
    contextMenu:{
        items:{ 
            // "row_above": { name: "向上插入一行" },
            // "row_below": { name: "向下插入一行" },
            "remove_row": { name: "删除一行" },
            // "remove_col": { name: "删除一列", disabled: () => { } },
            // "col_left": { name: "向左添加一列" },
            // "col_right": { name: "向右添加一列" },
            // "hsep1": "---------",
            // "hsep2": "---------",
            // "hsep3": "---------",
            "undo": { name: "撤销" },
            "redo": { name: "恢复" },
            // "copy": { name: "复制" },
            // "cut": { name: "剪切" },
            // "commentsAddEdit": { name: "添加注释" },
            // "commentsRemove": { name: "删除注释" },
            // "make_read_only": { name: "只读" },
            // "alignment": { name: "对齐" },
            // "paste": {
            //     name: '粘贴',
            //     // disabled: function () {
            //     //     return clipboardCache.length === 0;
            //     // },
            //     callback: function () {
            //         // var plugin = this.getPlugin('copyPaste');

            //         // this.listen();
            //         // plugin.paste(clipboardCache);
            //         var plugin = this.getPlugin('copyPaste');
            //         this.listen();
            //         plugin.paste(11);
            //         // console.log(this);
            //         console.log("paste回调")
            //         console.log(this)
            //     }
            // }
        }
    },
    language:'zh-CN',//官方汉化
    copyable:true,// 允许键盘复制
    copyPaste: true, // 允许粘贴
    stretchH: "all",  // 拉伸行，可选值为，all 拉伸所有，none 不拉伸，last 拉伸最后一行  根据宽度横向扩展，last:只扩展最后一列，none：默认不扩展
    manualColumnResize: true, // 列拉伸,调整大小 允许 拖动 手工更改列距
    manualRowResize: true, // 行拉伸,调整大小 手动更改行距
    manualColumnMove: true, // 拖动交换列 手动移动列
    manualRowMove: true, // 拖动交换 手动移动行
    manualColumnFreeze: true, //手动固定列  ?
    comments: true, //添加注释  ?
    cell: [  //???
        // {row: 1, col: 1, comment: {value: 'this is test'}},
    ],
    customBorders:[],//添加边框
    columnSorting: false,
    // columnSorting: {//默认排序
    //     indicator: true,
    //     initialConfig: {
    //         column: 3,
    //         sortOrder: 'desc'
    //     },
    // },
    // multiColumnSorting: {//排序
    //     // display an arrow icon in the column header
    //     indicator: true,
    //     // disable clicking on the column header to sort the column
    //     headerAction: false,
    //     sortEmptyCells: true,
    //     initialConfig: [{
    //         column: 3,
    //         sortOrder: 'desc'
    //     },
    //     {
    //         column: 4,
    //         sortOrder: 'asc'
    //     }],
        
    // },
    fillHandle: true, //选中拖拽复制 possible values: true, false, "horizontal", "vertical"
    fixedColumnsLeft: 1,//固定左边列数
    // fixedRowsTop: 2,//固定上边列数
    mergeCells: [   //合并
        // {row: 1, col: 1, rowspan: 3, colspan: 3},  //指定合并，从（1,1）开始行3列3合并成一格
        // {row: 3, col: 4, rowspan: 2, colspan: 2}
    ],
        // cell: [ ]   // 设置指定单元格的一些属性，比如是否可编辑，定义className
    /*单元格样式设置 */
    cells: function(row, column, prop) { // 动态设置一些单元格的属性
        const cellProperties = {readOnly: false, className: ''};
        const visualRowIndex = this.instance.toVisualRow(row);//行
        const visualColIndex = this.instance.toVisualColumn(column);//列
        
        if(visualColIndex === 1 || visualColIndex === 0) {//学号禁用 颜色 
            cellProperties.readOnly = true;
            cellProperties.className = 'forbidden';
        }
        // if (row === 0) {// 对第一行设置样式，注意：不包括表头
        //     cellProperties.renderer = firstRowRenderer; // uses function directly
        
        // } else {
            if(prop=="eduId"){//教育ID，不允许 重复
                cellProperties.renderer = onlyEduId;//
                
            }
        // }
        return cellProperties;
    },
    // hiddenColumns: {
    //     columns: [],//设置哪列隐藏
    // },
    colWidths: [60, 60, 60, 40, 110, 60, 110, 60, 60, 110, 110],//设置每一列的宽
    allColumns : [//按规定的 显示全部的每一列的校验规则
        {data: 'studentName',readOnly: true},//学生姓名
        {data: 'studentId',readOnly: true},//学号
        {data: 'eduId',allowEmpty: false,  //教育ID
            validator(val, callback){                
                if((!val && val!==0)){ 
                    return callback(false)
                }else if(val.length!=8){//限制8位
                    return callback(false)
                }
                return callback(true)
            }
        },
        {data: 'sexName',type: "dropdown", source: ["男", "女"], strict: false,validator: emptyValidator},//性别  //strict 是否严格匹配
        {data: 'cardNO',//身份证号
            validator(val, callback){    
                const reg =/(^[1-9]\d{7}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}$)|(^[1-9]\d{5}(18|19|20)\d{2}((0[1-9])|(1[0-2]))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$)/;
                if (!val) {
                    return callback(false)
                } else if (!reg.test(val)) {
                    return callback(false)
                } else {
                    callback(true);
                }   
            }
        },
        {data: 'nationName',type: "dropdown", source: [], strict: false,validator: emptyValidator},//民族 
        {data: 'hukouName',type:'text', placeholder: '--/--/--',//户口所在城区（英文/分开）
            validator(val, callback){
                if(!val){
                    return callback(false);
                }else if(val.split('/').length!=3){
                    return callback(false);
                }else{
                    callback(true);
                }
            }
        },
        {data: 'intentionName',type: "dropdown", source: ["走读", "住宿"], strict: false,validator: emptyValidator},//住宿意向
        {data: 'zkResult',type: 'numeric'},//中考成绩  ,trimWhitespace: false不允许 输入空格
        {data: 'currentAdd',validator: emptyValidator},//现住址
        {data: 'subjectNames', placeholder: '--,--,--',//选考科目（各科英文,隔开）
            validator(val, callback){
                if(!val){
                    return callback(false);
                }else if(val.split(',').length!=3){
                    return callback(false);
                }else{
                    callback(true);
                }
            }
        },
    ],

    columns: [
        // {data: 'available',type: 'checkbox',}, // 复选框checkedTemplate: 1,// uncheckedTemplate: 0
        // {  data: 'className', }, // type: 'checkbox',
        // { data: 'studentName',}, // validator: validatorStuname
        // { data: 'studentId', type: 'numeric',}, // editor: false,// readOnly: true  //设置只读   
        // { data: 'score', type: 'numeric',
        //     validator(val, callback){                
        //         if((!val && val!==0) || isNaN(parseFloat(val))){ 
        //             return callback(false)
        //         }
        //         return callback(true)
        //     }
        // },
        // { data: 'excelGender', type: "dropdown", source: ["男", "女"], strict: false,
        //     columnSorting: {
        //         indicator: false,
        //         headerAction: false,
        //         compareFunctionFactory(sortOrder, columnMeta) {
        //           return (value, nextValue) => 0; // Don't sort the first visual column.
        //         }
        //     }
        // },
        // { data: 'excelBirthday', type: 'date', dateFormat: 'YYYY-MM-DD', correctFormat: true, defaultDate: '19000101',
        //     columnSorting: {
        //         indicator: false,
        //         headerAction: false,
        //         compareFunctionFactory(sortOrder, columnMeta) {
        //           return (value, nextValue) => 0; // Don't sort the first visual column.
        //         }
        //     }
        // },
        // { data: 'phone', type: 'text',
        //     validator (val, callback) {
        //         if((!val)) return callback(true)
        //         let pattern = /^([0-9]{0}|1[0-9]{10})$/
        //         // console.log(pattern.test(val))
        //         if(pattern.test(val)) return callback(true)
        //         return callback(false)
        //     },
        //     columnSorting: {
        //         indicator: false,
        //         headerAction: false,
        //         compareFunctionFactory(sortOrder, columnMeta) {
        //           return (value, nextValue) => 0; // Don't sort the first visual column.
        //         }
        //     }
        // },
        // {data: 'email', validator: emailValidator, //allowInvalid: true ,
        //     columnSorting: {
        //         indicator: false,
        //         headerAction: false,
        //         compareFunctionFactory(sortOrder, columnMeta) {
        //             return (value, nextValue) => 0; // Don't sort the first visual column.
        //         }
        //     }
        // },
        // {data: 'imgsrc',
        //     renderer(instance, td, row, col, prop, value) {
        //         const img = document.createElement('img');

        //         img.src = value || '';

        //         img.addEventListener('mousedown', event => {
        //             event.preventDefault();
        //         });

        //         td.innerText = '';
        //         td.appendChild(img);

        //         return td;
        //     },
        //     columnSorting: {
        //         indicator: false,
        //         headerAction: false,
        //         compareFunctionFactory(sortOrder, columnMeta) {
        //           return (value, nextValue) => 0; // Don't sort the first visual column.
        //         }
        //     }
        // }
        // // {
        // //     data: 'ssMaterialQnrPic',
        // //     renderer: "html",  // 将字符传转化成html，并渲染html
        // //     editor: false
        // // }
    ],
    // afterRender: function(){

    // },
    afterChange: function (changes, source) {
        // console.log("changes: ", changes) // row, prop, oldVal, newVal
        // console.log("source: ", source) // op
        if(that) { // 第一次加载没必要执行，避免报错
            // that.importExcelDsiable = true
            that.dataList = this.getSourceData()
        }
        // // let updatePlayerList = this.getDataList();
        if(changes){
            console.log(changes)
            changes.forEach(([row,prop,oldValue,newValue]) => {
                // // 正则判断
                // let phoneReg = /^1(3|4|5|7|8)\d{9}$/
                // if(prop == 'phone'){ //phone是我需要判断的字段
                //     if( phoneReg.test(newValue)){
                //         console.log(true);
                //     } else{
                //         debugger
                //         console.log(false);
                //     }
                // }
            })
        }
    },
}

function firstRowRenderer(instance, td, row, col, prop, value, cellProperties) {
    Handsontable.renderers.TextRenderer.apply(this, arguments);
    td.style.fontWeight = 'bold';
    td.style.color = 'green';
    td.style.background = 'orange';
}
/**
 * 设置学号 唯一性的校验背景 
 * @param {*} instance 
 * @param {*} td 
 * @param {*} row 
 * @param {*} col 
 * @param {*} prop 
 * @param {*} value 
 * @param {*} cellProperties 
 */
function onlyEduId(instance, td, row, col, prop, value, cellProperties){
    Handsontable.renderers.TextRenderer.apply(this, arguments);
    if(prop=='eduId'){//教育id不能重复
        let findLen = instance.getSourceData().filter(items=>{return value == items.eduId});
        // console.log(findLen,'findLen')
        if(findLen.length>1){//能找到重复的
            if(!repeatRow.length){
                repeatRow.push(row);
            }else{            
                // console.log(repeatRow.length,'repeatRow.length')
                // console.log(row)
                // console.log(td,'td')
                td.style.background="yellow";
            }           
        }
    }
  
    
    // console.log(instance,'instance')
}
/**
 * 分数【score】 大于等于0 绿色  小于0 红色， 必填项校验，为空是红色
 * @param {*} instance 
 * @param {*} td 
 * @param {*} row 
 * @param {*} col 
 * @param {*} prop 
 * @param {*} value 
 * @param {*} cellProperties 
 */
function negativeValueRenderer(instance, td, row, col, prop, value, cellProperties) {
    Handsontable.renderers.TextRenderer.apply(this, arguments);
  
    // if the row contains a negative number
    // console.log(parseInt(value, 10),'value')
    if(!isNaN(parseInt(value))){
        if (parseInt(value, 10) < 0) {//数字小于0为空色
            // add class 'make-me-red'
            td.className = 'make-me-red';
        }else{
            td.className='make-me-green';
        }
        if ((!value && value!==0) || value === '') {
            //   td.style.background = 'red';
        
        } else {
            if (value === 'Nissan') {
                td.style.fontStyle = 'italic';
            }
        
            td.style.background = '';
        }
    }else{
        td.style.background = 'red';
    }  
  
   
}
  // maps function to a lookup string
Handsontable.renderers.registerRenderer('negativeValueRenderer', negativeValueRenderer);

 
export default hotSetting